import useGetData from '@hooks/useGetData';

import { useState, useEffect } from 'react'
import { CollegeSidebar } from './CollegeSidebar';
import { CollegeMain } from './CollegeMain';
function classNames(...classes) {
  return classes.filter(Boolean).join(' ')
}

export function CollegeList() {
  const [Selectedcities, setSelectedcities] = useState([]);
  const [selectedCategories, setSelectedCategories] = useState([]);
  const [submitValue, setSubmitValue] = useState('');

  const params = {};

  if (selectedCategories.includes('is_985')) { params.is_985 = 'true'; }
  if (selectedCategories.includes('is_211')) { params.is_211 = 'true'; }
  if (selectedCategories.includes('is_dfc')) { params.is_dfc = 'true'; }
  if (selectedCategories.includes('is_imp_country')) { params.is_imp_country = 'true'; }
  if (submitValue) { params.school_name = submitValue; }

  const queryParams = new URLSearchParams(params);

  Selectedcities.forEach((item) => {
    queryParams.append('filter_cities', item);
  });

  const apiUrl = `/api/school/get_all_schools?${queryParams.toString()}`;
  const [schoolData, schoolDataloading] = useGetData(apiUrl);
  return (
    <>
      <main className="mx-auto max-w-2xl py-4 sm:py-8 lg:max-w-7xl">
        <div className="md:pt-12 lg:grid lg:grid-cols-3 lg:gap-x-8 xl:grid-cols-4">
          <CollegeSidebar Selectedcities={Selectedcities} setSelectedcities={setSelectedcities}
            selectedCategories={selectedCategories} setSelectedCategories={setSelectedCategories} />
          <CollegeMain className="lg:col-span-2 xl:col-span-3"
            schoolData={schoolData} schoolDataloading={schoolDataloading} setSubmitValue={setSubmitValue} />
        </div>
      </main>

    </>
  )
}
